<template>
  <div class="home">
    <div class="item" v-for="(item,index) in newsList" :key="index" @click="goUrl(item)">
      <img :src="item.img" alt="">
      <div class="main">
        <div class="title">{{item.title}}</div>
        <div class="title2">{{item.title2}}</div>
        <div>{{item.time}}</div>
      </div>
      <div class="btn">详情>></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: []
    }
  },
  created() {
    this.initData(0)
  },
  watch:{
    $route(){
      const index = this.$route.params.navIndex
      this.initData(index)
    }
  },
  methods: {
    initData(index) {
      if(index == 0){
        // 集团要闻
        // 后台获取数据 （暂时假数据）
        this.newsList = [
          {
            title: '集团要闻',
            title2: '当数字与能源相遇，能探索的是信息和能量的关系，能提升的是人类使用能源的系统效率，能重构的是现代能源体系可期的未来，数字能源 “智”动世界…',
            time: '2020-08-21',
            img:require('../assets/News/img.png'),
            id:1
          },
          {
            title: '集团要闻',
            title2: '当数字与能源相遇，能探索的是信息和能量的关系，能提升的是人类使用能源的系统效率，能重构的是现代能源体系可期的未来，数字能源 “智”动世界…',
            time: '2020-08-21',
            img:require('../assets/News/img.png'),
            id:2
          },
          {
            title: '集团要闻',
            title2: '当数字与能源相遇，能探索的是信息和能量的关系，能提升的是人类使用能源的系统效率，能重构的是现代能源体系可期的未来，数字能源 “智”动世界…',
            time: '2020-08-21',
            img:require('../assets/News/img.png'),
            id:3
          },
          {
            title: '集团要闻',
            title2: '当数字与能源相遇，能探索的是信息和能量的关系，能提升的是人类使用能源的系统效率，能重构的是现代能源体系可期的未来，数字能源 “智”动世界…',
            time: '2020-08-21',
            img:require('../assets/News/img.png'),
            id:4
          },
        ]
        return
      }
      if(index == 1){
        // 行业动态
        // 后台获取数据 （暂时假数据）
        this.newsList = [
          {
            title: '行业动态',
            title2: '当数字与能源相遇，能探索的是信息和能量的关系，能提升的是人类使用能源的系统效率，能重构的是现代能源体系可期的未来，数字能源 “智”动世界…',
            time: '2020-08-21',
            img:require('../assets/News/img.png'),
            id:1
          },
          {
            title: '行业动态',
            title2: '当数字与能源相遇，能探索的是信息和能量的关系，能提升的是人类使用能源的系统效率，能重构的是现代能源体系可期的未来，数字能源 “智”动世界…',
            time: '2020-08-21',
            img:require('../assets/News/img.png'),
            id:2
          },
          {
            title: '行业动态',
            title2: '当数字与能源相遇，能探索的是信息和能量的关系，能提升的是人类使用能源的系统效率，能重构的是现代能源体系可期的未来，数字能源 “智”动世界…',
            time: '2020-08-21',
            img:require('../assets/News/img.png'),
            id:3
          },
          {
            title: '行业动态',
            title2: '当数字与能源相遇，能探索的是信息和能量的关系，能提升的是人类使用能源的系统效率，能重构的是现代能源体系可期的未来，数字能源 “智”动世界…',
            time: '2020-08-21',
            img:require('../assets/News/img.png'),
            id:4
          },
        ]
        return;
      }
      if(index == 2){
        // 媒体报道
        // 后台获取数据 （暂时假数据）
        this.newsList = [
          {
            title: '集团要闻',
            title2: '当数字与能源相遇，能探索的是信息和能量的关系，能提升的是人类使用能源的系统效率，能重构的是现代能源体系可期的未来，数字能源 “智”动世界…',
            time: '2020-08-21',
            img:require('../assets/News/img.png'),
            id:1
          },
          {
            title: '媒体报道',
            title2: '当数字与能源相遇，能探索的是信息和能量的关系，能提升的是人类使用能源的系统效率，能重构的是现代能源体系可期的未来，数字能源 “智”动世界…',
            time: '2020-08-21',
            img:require('../assets/News/img.png'),
            id:2
          },
          {
            title: '媒体报道',
            title2: '当数字与能源相遇，能探索的是信息和能量的关系，能提升的是人类使用能源的系统效率，能重构的是现代能源体系可期的未来，数字能源 “智”动世界…',
            time: '2020-08-21',
            img:require('../assets/News/img.png'),
            id:3
          },
          {
            title: '媒体报道',
            title2: '当数字与能源相遇，能探索的是信息和能量的关系，能提升的是人类使用能源的系统效率，能重构的是现代能源体系可期的未来，数字能源 “智”动世界…',
            time: '2020-08-21',
            img:require('../assets/News/img.png'),
            id:4
          },
        ]
        return;
      }
    },
    goUrl(item){
      this.$router.push('/news-item/' + item.id)
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  width: 1200px;
  margin: 80px auto;
  .item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E5E5E5;
    padding: 20px 0;
    position: relative;
    cursor: pointer;
    .main{
      width: 800px;
      .title{
        font-size: 25px;
        font-weight: bold;
        padding-bottom: 20px;
      }
      .title2{
        line-height: 1.5;
        padding-bottom: 20px;
      }
    }

    .btn{
      position: absolute;
      right: 0;
      bottom: 50px;
    }
  }
}
</style>
